<template>
  <div class="wrapper">
    <div class="sub_title lr_nav_bot_bd">
      <div class="safe_area_box"></div>
      <div class="tit_txt">
        <div class="ic">
          <i @click="shoucangAndPingbi(5)" style="font-size: 17rem" class="iconfont lricon-pingbi-keyhole-xian"></i>
          <i @click="shoucangAndPingbi(4)" style="font-size: 17rem;" class="iconfont lricon-shoucangxiao"></i>
        </div>
        <span @click="r"> (六壬起个课APP-资料)</span>
        <div class="ic">
          <i @click="goZlSS" class="iconfont lricon-sousuo"></i>
          <i @click="getAllBook" :class="['iconfont', currentIcon.iconClass]" :style="currentIcon.style"
            v-touch-options="touchOptions" v-touch:hold="switchIcon"></i>
        </div>
      </div>
    </div>
    <div class="zl_content">
      <div :key="item.id" class="book" @click="toReader(item.title)" v-for="(item, index) in zlList">
        <div v-touch:hold="() => longtap(item)" class="book_fengmian" v-touch-options="touchOptions">
          <div class="left">
            <div class="b1">
              <div class="b2">{{ item.title }}</div>
            </div>
          </div>
          <div class="right">
            <div style="border-top: none"></div>
            <div></div>
            <div></div>
            <div></div>
            <div style="border-bottom: none"></div>
          </div>
        </div>
        <div class="tit">
          <div :style="{ color: getProgressColor(item.percent) }" class="bkrdp">{{ item.percent }}%</div>
          <div class="bktit">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <transition name="slide-down">
      <book-tan-chuang v-show="showPaixu"></book-tan-chuang>
    </transition>
    <van-overlay @click="showMenu = false" :show="showMenu" :lazy-render="false">
      <div class="overlay">
        <div class="menu" @click.stop>
          <div @click="updateShoucang" class="menu_item"> <i style="color: #F57F17;"
              class="iconfont lricon-shoucang"></i><span>{{
                optBook.isshoucang == 0 ? '收藏' : '取消收藏' }}</span></div>
          <div @click="updatePingbi" class="menu_item"> <i style="color: red;"
              class="iconfont lricon-pingbi3"></i><span>{{ optBook.ispingbi
                == 0 ? '屏蔽' : '取消屏蔽' }}</span></div>
          <div @click="zhidingbook" class="menu_item"> <i style="color: blue;"
              class="iconfont lricon-zhiding2"></i><span>{{ optBook.id ==
                zhidingId ? '取消置顶' : '置顶' }}</span></div>
          <div @click="showMenu = false" class="quxiao">取消</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { selectBooklist, updatePingbibook, updateShoucangbook } from '../api/dbUtils';
import { Overlay } from 'vant';
import BookTanChuang from '../page/BookTanChuang.vue';
import Vue3TouchEvents from "vue3-touch-events";
import { show } from '@tauri-apps/api/app';
import { getAppStore } from '../api/store';
import { showToast } from '@nutui/nutui';
export default {
  name: "ShenSha",
  components: { BookTanChuang, VanOverlay: Overlay },
  data() {
    return {
      zhidingId: -1,
      activeIndex: 0,
      // 图标配置列表，包含每个图标的类名和样式
      icons: [
        {
          iconClass: 'lricon-morenpaixu1',
          style: 'font-size: 16px;'
        },
        {
          iconClass: 'lricon-shijianpaixu',
          style: 'font-size: 17rem; margin-right: 0rem;'
        },
        {
          iconClass: 'lricon-cishu',
          style: 'font-size: 17px;'
        },
        {
          iconClass: 'lricon-huanxingjindutiao',
          style: 'font-size: 17px;'
        }
      ],
      zlList: [],
      showMenu: false,
      showPaixu: false,
      touchOptions: {
        swipeTolerance: 70, // 滑动距离阈值
        longTapTimeInterval: 400, // 长按时间阈值
      },
      optBook: {
        isshoucang: 0,
        ispingbi: 0,
        id: -1
      }
    };
  },
  async created() {
    let store = await getAppStore()
    let settings = await store.get('appSettings')
    this.activeIndex = settings.lr_zl_px_index
    this.zlList = await selectBooklist(this.activeIndex);
    this.zhidingId = settings.lr_zl_zhiding_id
    if (this.zhidingId != -1) {
      this.zlList = [...this.zhidingArr(this.zlList, this.zhidingId)]
    }
  },
  props: {},
  methods: {
    slcDate(date) {
      this.dtopts = formatToChineseDateTime(this.currentDatetime);
      console.log(this.dtopts);
      this.currentYuejiang = getCurrentYueJiangAndJieQi(this.dtopts.currentJieQi);
    },
    r() {

      location.reload();
    },
    goZlSS() {
      this.$router.push('/bookSearch')
    },
    async shoucangAndPingbi(i) {
      this.zlList = await selectBooklist(i, this.optBook.id);
    },
    async updateShoucang() {
      if (this.optBook.isshoucang == 0) {
        showToast.success('书籍' + this.optBook.title + '收藏完成', { id: 1 })
      } else {
        showToast.success('书籍' + this.optBook.title + '取消收藏', { id: 1 })
      }
      await updateShoucangbook(this.optBook)
      let r = await selectBooklist(this.activeIndex);
      this.zlList = [...r]
      if (this.zhidingId != -1) {
        this.zlList = [...this.zhidingArr(this.zlList, this.zhidingId)]
      }
      this.showMenu = false
    },
    async updatePingbi() {
      if (this.optBook.ispingbi == 0) {
        showToast.success('书籍' + this.optBook.title + '屏蔽完成', { id: 1 })
      } else {
        showToast.success('书籍' + this.optBook.title + '取消屏蔽', { id: 1 })
      }
      await updatePingbibook(this.optBook)
     let r = await selectBooklist(this.activeIndex);
      this.zlList = [...r]
      if (this.zhidingId != -1) {
        this.zlList = [...this.zhidingArr(this.zlList, this.zhidingId)]
      }
      this.showMenu = false
    },
    async getAllBook() {
      this.zlList = await selectBooklist(this.activeIndex);
    },
    async switchIcon() {
      let store = await getAppStore()
      let settings = await store.get('appSettings')
      // 使用取模运算实现循环切换
      this.activeIndex = (this.activeIndex + 1) % this.icons.length;
      if (this.activeIndex == 0) {
        showToast.text('默认书籍排序方式')
      } else if (this.activeIndex == 1) {
        showToast.text('最近阅读时间排序')
      } else if (this.activeIndex == 2) {
        showToast.text('书籍阅读次数排序')
      } else if (this.activeIndex == 3) {
        showToast.text('书籍阅读进度排序')
      }
      settings.lr_zl_px_index = this.activeIndex
      await store.set('appSettings', settings)
      this.zlList = await selectBooklist(this.activeIndex);
    },
    toReader(tit) {
      this.$router.push({ path: "/bookRead", query: { title: tit } });
    },
    longtap(item) {
      this.showMenu = true
      this.optBook = { ...item }
    },
    async shoucangopt() {
      updateShoucangbook(this.optBook)
    },
    async pingbiopt() {
      updatePingbibook(this.optBook)
    },
    async setzhidingId() {
      let store = await getAppStore()
      let settings = await store.get('appSettings')
      settings.lr_zl_zhiding_id = this.optBook.id
      await store.set('appSettings', settings)
      showToast.success('书籍' + this.optBook.title + '置顶成功')
    },
    async getzhidingId() {
      let store = await getAppStore()
      let settings = await store.get('appSettings')
      return settings.lr_zl_zhiding_id
    },
    async zhidingbook() {
      let store = await getAppStore()
      let settings = await store.get('appSettings')
      if (this.optBook.id == this.zhidingId) {
        this.zhidingId = -1
        let r = await selectBooklist(this.activeIndex)
        this.zlList = [...r]
        settings.lr_zl_zhiding_id = -1
        await store.set('appSettings', settings)
        showToast.success('书籍' + this.optBook.title + '取消置顶', { id: 1 })
        this.showMenu = false
        return
      }

      if (this.optBook.id != this.zhidingId) {
        this.zhidingId = this.optBook.id
        this.zlList = [...this.zhidingArr(this.zlList, this.zhidingId)]
        settings.lr_zl_zhiding_id = this.optBook.id
        await store.set('appSettings', settings)
        showToast.success('书籍' + this.optBook.title + '置顶成功', { id: 1 })
        this.showMenu = false
      }
    },
    zhidingArr(arr, targetId) {

      // 创建原数组的副本，避免修改原数组
      const newArr = [...arr];

      // 查找目标对象的索引
      const targetIndex = newArr.findIndex(item => item.id === targetId);

      // 如果找到目标对象且不在首位，则进行置顶操作
      if (targetIndex !== -1 && targetIndex !== 0) {
        // 从数组中移除目标对象
        const [targetItem] = newArr.splice(targetIndex, 1);
        // 将目标对象添加到数组开头
        newArr.unshift(targetItem);
      }

      return newArr;
    },
    getProgressColor(value) {
      // 确保值在0-100范围内
      const val = Math.min(100, Math.max(0, value));

      // 定义颜色区间
      if (val < 20) {
        return '#ef4444'; // 红色 - 低进度
      } else if (val < 40) {
        return '#f59e0b'; // 橙色 - 较低进度
      } else if (val < 60) {
        return '#eab308'; // 黄色 - 中等进度
      } else if (val < 80) {
        return '#3b82f6'; // 蓝色 - 较高进度
      } else {
        return '#10b981'; // 绿色 - 高进度
      }
    },
  },
  computed: {
    // 获取当前显示的图标配置
    currentIcon() {
      return this.icons[this.activeIndex];
    }
  },
  mounted() { },
  directives: {
    ...Vue3TouchEvents.directives,
  },
  beforeDestroy() { },
};
</script>

<style lang="scss" scoped>
$cbgc: var(--lr_lbgc);
$lbdc: var(--lr_lbdc);

.wrapper {
  width: 100vw;
  height: 100vh;
  // background-color: white;
  display: flex;
  align-items: center;
  flex-direction: column;

  .sub_title {
    width: 100vw;
    background-color: var(--nav_bg_color);
    display: flex;
    flex-direction: column;

    // color: var(--cart_bg_color);
    .tit_txt {
      width: 100vw;

      .ic {
        i {
          font-size: 18px;


          &:active {
            transition: transform 0.3s ease;
            transform: scale(1.2)
          }
        }


        min-width: 20vw;
        text-align: center;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      height: 30px;
      line-height: 30px;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }


  .zl_content {
    margin: 0;
    padding: 0;
    width: 100vw;
    // flex-shrink: 0;
    // background: #cfa4a4;
    display: flex;
    align-items: start;
    // justify-content: flex-start;
    flex-wrap: wrap;
    overflow: scroll;
    height: fit-content;
    // margin-top: calc(31rem + var(--safe-top));
    max-height: calc(100vh - 31rem - var(--safe-top) - var(--lr_nav_height));

    .book {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 28vw;
      margin-left: 4vw;

      .tit {
        padding-top: 2px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 2px;
        width: 28vw;
        font-size: 14px;
        font-weight: 500;

        .bktit {
          flex-grow: 1;
          white-space: nowrap;
          /* 禁止文本换行 */
          overflow: hidden;
          /* 隐藏超出容器的内容 */
          text-overflow: ellipsis;
          /* 超出部分显示省略号 */
        }
      }

      margin-top: 10rem;
      margin-bottom: 10rem;

      .book_fengmian {
        background: url("../assets/素材/bookImg.png") no-repeat center / cover;
        width: 28vw;
        height: 36vw;

        // background-color: #223751;
        display: flex;

        .right {
          width: 3vw;
          border-left: 1px solid white;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100%;

          div {
            width: 100%;
            height: 20%;
            border-top: 0.5px solid white;
            border-bottom: 0.5px solid white;
          }
        }

        .left {
          height: 100%;
          flex-grow: 1;

          .b1 {
            padding: 2px;
            height: fit-content;
            background-color: #fff;
            margin-top: 3vw;
            margin-left: 3vw;
            width: fit-content;
            height: fit-content;

            .b2 {
              padding: 1px;
              max-height: 24vw;
              /* 超出部分显示垂直滚动条 */
              overflow-y: auto;
              /* 隐藏横向滚动条（如果不需要） */
              overflow-x: hidden;
              white-space: nowrap;
              /* 核心：设置文字竖向排列 */
              writing-mode: vertical-rl;
              /* 从右到左竖向排列 */
              /* 可选：从左到右竖向排列 */
              /* writing-mode: vertical-lr; */
              font-size: 10px;
              border: 1px solid black;
            }
          }
        }
      }
    }
  }

  .overlay {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;

    .menu {
      height: fit-content;
      border-radius: 12rem;
      width: 210rem;
      background: whitesmoke;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;

      .menu_item {
        width: 60vw;
        height: 40rem;
        font-size: 15px;
        line-height: 40rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;

        span {
          margin-left: 20px;
        }

        &:active {
          background-color: var(--lr_active_color);
        }
      }

      .quxiao {
        background-color: #fff;
        margin-top: 5rem;
        width: 60vw;
        height: 40rem;
        font-size: 15px;
        line-height: 40rem;
        color: #455A64;
        text-align: center;

        &:active {
          background-color: var(--lr_active_color);
        }
      }
    }
  }

}
</style>
